<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>注册</title>
<style>
*{margin:0px; padding:0px;}
body{background-color: #f5f5f5;}
div.zhuceBox{width: 90%;  margin:50px auto 0px;}
div.zhuceBox h3.f100{font-weight: 100; font-size:16px; padding-bottom:10px; margin-bottom: 10px; font-family:"Microsoft YaHei"; color:#333; border-bottom:1px solid #ddd;}
div.zhuceBox form#registeForm{padding-top: 15px;}
div.zhuceBox input.inputCom{width: 100%; border:none; height:40px; line-height: 40px; padding: 0px; text-indent:15px; outline:none; border:1px solid #eee; font-size:14px; font-family:"Microsoft YaHei"; color:#333; margin-bottom: 20px; border-radius:3px;}
div.zhuceBox div.yanzm{overflow: hidden; padding-bottom: 10px;}
div.zhuceBox div.yanzm input.inputCom{width:45%; float: left; margin-right:15px;}
div.zhuceBox div.yanzm img.yanzm{height:40px; float: left; border:1px solid #ddd;}
div.zhuceBox input.inputSumit{height:45px; background:#0B8ED6; font-size:18px; color:#fff;}
div.zhuceBox a.hasUsername{display: block; width: 100%; height: 45px; line-height: 45px; text-align: center; font-size:16px; background-color:#ddd; text-decoration: none; font-family:"Microsoft YaHei"; color:#333;}
</style>
</head>
<body>
<div class="zhuceBox">
	<h3 class="f100">账号注册</h3>
	<form action="" method="post" id="registeForm">
		<input type="text" class="inputCom inputPhone" placeholder="请输入手机号">
		<input type="password" class="inputCom inputPwd" placeholder="请输入密码">
		<input type="password" class="inputCom inputRpwd" placeholder="确认密码">
		<div class="yanzm">
			<input type="text" class="inputCom inputYzm" placeholder="验证码">
			<img src="http://imgsrc.baidu.com/imgad/pic/item/d000baa1cd11728bdf999dd4c2fcc3cec2fd2c8b.jpg" alt="" class="yanzm">
		</div>
		<input type="submit" class="inputCom inputSumit" value="注   册">
		<a href="denglu.html" class="hasUsername">已经有账号？</a>
	</form>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
(function(){
var inputPhone = null,inputPwd = null, inputRpwd = null,inputYzm = null;
var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;  
$("form#registeForm").submit(function(){
	inputPhone = $(this).find("input.inputPhone").val();
	inputPwd = $(this).find("input.inputPwd").val();
	inputRpwd = $(this).find("input.inputRpwd").val();
	inputYzm = $(this).find("input.inputYzm").val();
	if(inputPhone == null || inputPhone == ""){
		alert('请输入手机号码！');
		return false;
	};
	if(!phoneReg.test(inputPhone)){  
	    alert('请输入有效的手机账号！');  
	    return false;  
	}
	if(inputPwd == null || inputPwd == ""){
		alert('请输入密码！');
		return false;
	};
	if(inputRpwd == null || inputRpwd == ""){
		alert('请输入确认密码！');
		return false;
	};
	if(inputPwd != inputRpwd){
		alert('两次输入的密码不一致！');
		return false;
	};
	if(inputYzm == null || inputYzm == ""){
		alert("请输入验证码！");
		return false;
	};
	return true;
});
})();
</script>
</body>
</html>